<template>
  <div>
    <div class="form">
      <input type="text" class="form__input"  :placeholder="placeholder" v-model='formValue' />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,watch } from 'vue'

const emit = defineEmits(['update:modelValue'])
const props = withDefaults(
  defineProps<{
    size?: string
    placeholder?: string
  }>(),{
placeholder:"Type anything..."
  }
)


const  placeholder =  props.placeholder

const formValue = ref('')
watch(formValue,(newVal)=>{
emit('update:modelValue', newVal)
})


const setSizeStyle = (size?: string)=>{
const miniStyle = {
  width: size === 'mini'? '180px': '280px',
  height: size === 'mini'? '50px': '50px',
  fontSize: size === 'mini'? '18px': '24px',
  borderRadius: size==='mini'? '10px':'20px'
}
return miniStyle
}
const styleData =  setSizeStyle(props.size)

const { height: th, width: tw , fontSize: fs,
        borderRadius:br
} = styleData
</script>
<style lang="less" scoped>
/*  FORM  */
.form {
  grid-column: 3/4;
  grid-row: 3/4;
}
.form__input {
  width: v-bind(tw);
  height: v-bind(th);
  border: none;
  border-radius: 20px;
  font-size: v-bind(fs);
  font-weight: 600;
  padding-left: 1.4rem;
  box-shadow: inset 0.2rem 0.2rem 0.5rem @greyLight-2,
    inset -0.2rem -0.2rem 0.5rem @white;
  background: none;
  font-family: inherit;
  color: @greyDark;
}
.form__input::-moz-placeholder {
  color: @greyLight-3;
}
.form__input:-ms-input-placeholder {
  color: @greyLight-3;
}
.form__input::placeholder {
  color: @greyLight-3;
}
.form__input:focus {
  outline: none;
  box-shadow: 0.3rem 0.3rem 0.6rem @greyLight-2, -0.2rem -0.2rem 0.5rem @white;
}
</style>
